<template>
 <el-select
 :class="custonClass"
 :multiple="multiple"
 :clearable="clearable"
 v-model="position"
 filterable
 @change="change"
 placeholder="请选择">
        <el-option-group
             v-for="group in options"
                      :key="group[defaultProps.groupLabel]"
                      :label="group[defaultProps.groupLabel]">
                      <el-option
                        v-for="item in group[defaultProps.groupOptions]"
                        :key="item[defaultProps.value]"
                        :label="item[defaultProps.label]"
                        :value="item[defaultProps.value]">
                      </el-option>
        </el-option-group>
 </el-select>
</template>
<script>
import position from '@/api/system/positionAPI'
export default {
  model: {
    prop: 'bindData',
    event: 'select'
  },
  props: {
    reslutIsObject: {type: Boolean, default: false},
    returnObject: {type: Boolean, default: false},
    objectKey: {type: String, default: 'positionCode'},
    multiple: {type: Boolean, default: false},
    clearable: {type: Boolean, default: false},
    bindData: [String, Array, Object],
    custonClass: {type: String, default: 'wp-form-280'},
    defaultProps: {
      type: Object,
      default () {
        return {
          groupLabel: 'departmentName',
          groupOptions: 'values',
          value: 'positionCode',
          label: 'positionName'
        }
      }
    }
  },
  watch: {
    bindData: {
      handler (val) {
        if (val) {
          this.initSelectOption(val)
        }
      },
      deep: true,
      immediate: true
    }
  },
  components: {},
  data () {
    return {
      options: [],
      position: [],
      positionList: []
    }
  },
  mounted () {
    this.getPositionList({})
  },
  methods: {
    initSelectOption (data) {
      if (this.multiple) {
        if (Array.isArray(data) && data.length > 0) {
          this.position = data.map((v) => {
            return v[this.objectKey]
          })
        }
      } else {
        if (typeof (data) == 'string') {
          this.position = data
        } else {
          return data[this.objectKey]
        }
      }
    },
    change (data) {
      if (this.reslutIsObject) {
        const result = data.map(v => {
          return {[this.objectKey]: v}
        })
        this.$emit('select', result)
      } else {
        this.$emit('select', data)
      }
      if (this.returnObject) {
        if (data.length <= 0 || this.positionList.length <= 0) {
          this.$emit('update:resultObject', [])
          return
        }
        const dataList = this.positionList.filter(item => {
          return data.includes(item[this.objectKey])
        })
        this.$emit('update:resultObject', dataList)
      }
    },
    getPositionList (params) {
      position.getPositionListAPI(params).then(res => {
        this.options = this.convertData(res.data)
        if (this.returnObject && res.data) {
          this.positionList = [...res.data]
        }
      })
    },
    convertData (list) {
      const obj = {}
      const options = []
      const key = this.defaultProps.groupLabel
      const groupOptions = this.defaultProps.groupOptions
      list.map(item => {
        if (!obj.hasOwnProperty(item[key])) { // 如果不存在这个属性
          obj[item[key]] = []
          const temp = {}
          temp[key] = item[key]
          temp[groupOptions] = obj[item[key]]
          options.push(temp)
        }
        obj[item[key]].push(item)
      })
      return options
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
